html,body {
   width: 100%;
   height: 100%;
   background-color: #f2f2f2;
}
.topNav {
  width: 100%;
  height: 45px;
  line-height: 45px;
  background-color: #333;
  .wrapper {
     display: flex;
     flex-direction: row-reverse;
     ul {
        display: flex;
        li {
          a {
             color: #dcdcdc;
             font-size: 14px;
          }
        }
        .line {
           width: 2px;
           height: 15px;
           background-color: #666;
           margin-top: 15px;
           margin-left: 10px;
           margin-right: 10px;
        }
     }
  }
}
.NavList {
    height: 132px;
    line-height: 132px;
    background-color: #fff;  
    .title {
       padding-left: 230px;
       position: relative;
       span {
          position: absolute;
          left: 0;
          top: 0;
       }
       a {
          font-size: 20px;
          margin-right: 50px;
          padding: 2px 0;
          border-bottom: 2px solid transparent;
          &:hover {
             color: #27BA9B;
             border-bottom: 1px solid #27BA9B;
          }
       }
    }
    .content {
        position: relative;
        overflow: hidden;
        height: 0;
        z-index: 1;
       .item {
          position: absolute;
          left: 0;
          width: 100%;
          height: 141px;
          box-sizing: border-box;
          background-color: #fff;
          box-shadow: 0  0 1px 1px #fff;
          ul {
             width: 100%;
             height: 141px;
             display: flex;
             justify-content: space-around;
             align-items: center;
             li {
                a {
                    display: block;
                    line-height: 110px;
                    border-right: 1px solid #e7e7e7;
                    img {
                       height: 100%;
                    }
                }
                &:last-child {
                   a {
                    border-right: 0 none;
                   }
                }
             }
          }
       }
    } 
}

// 焦点图
.focusBox {
   position: relative;
   height: 460px;
   // 轮播图 
   .focusimg {
       .item {
          position: absolute;
          img {
            width: 1200px;
            height: 460px;
        }
        transition: all 0.5s linear;
       }

       .btns {
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          height: 60px;
          line-height: 60px;
          width: 100%;
          font-family: "宋体";
          color: #fff;
          .leftBtn {
             position: absolute;
             left: 240px;
             width: 50px;
             text-align: center;
             background-color: rgba(105,101,101,.6);
             cursor: pointer;
             user-select: none;
          }
          .rightBtn {
             position: absolute;
             user-select: none;
             right: 5px;
             width: 50px;
             text-align: center;
             background-color: rgba(105,101,101,.6);
             cursor: pointer;
          }
       }

       .dotteds {
          position: absolute;
          bottom: 10px;
          right: 50px;
          width: 150px;
          height: 15px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          span {
             width: 10px;
             height: 10px;
             border: 1px solid #ccc;
             border-radius: 50%;
             cursor: pointer;
          }
          span.active {
              background-color: #ccc;              
          }
       }
       
    }

   //侧边栏
   .asideli {
      position: absolute;
      width: 234px;
      height: 460px;
      background-color: rgba(105,101,101,.6);
      padding: 20px 0;
      box-sizing: border-box;
      li {
          height: 42px;
          line-height: 42px;
          padding: 0 15px;
          &:hover {
             background-color: #27BA9B;
             cursor: pointer;
          }
          span {
             color: #fff;
             &:nth-child(2) {
                float: right;
                font-family: "宋体";
             }
          }
      }
      img {
          position: absolute;
          height: 460px;
          top: 0px;
          left: 234px;
          display: none;
      }
   }
}

// 主体内容
.maincontent {
    .contentitem {
       h1 {
          font-size: 25px;
          height: 55px;
          line-height: 55px;
       }
       ul {
           display: flex;
           justify-content: space-between;
           li {
              width: 24%;
              background-color: #f0f9f4;
              img {
                width: 100%;
              }
              box-shadow: 0 0 1px 2px #cdcdcd;
           }
           p {
             padding: 15px 0;
             text-align: center;
             span {
                display: block;
                margin-bottom: 10px;
             }
           }
       }
    }

    .rightaside {
        position: fixed;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 60px;
        span {
          font-size: 12px;
          display: block;
          height: 30px;
          line-height: 30px;
          background-color: #fff;
          text-align: center;
          margin-top: 5px;
          cursor: pointer;
        }
        span.active {
          background-color: orangered;
          color: #fff;
        }
    }
}

// 底部区域
.footer {
    background-color: #000;
    margin-top: 10px;
    .top_footer {
       height: 150px;
       padding: 20px 0;
       border-bottom: 1px solid #ccc;
       display: flex;
       justify-content: space-around;
       align-items: center;
       a {
          color: #fff;
          font-size: 28px;
          &::before {
             content: "";
             display: inline-block;
             vertical-align: middle;
             width: 58px;
             height: 58px;
             background: url("../images/sprites.png") no-repeat;
             background-size: 400px 400px;
             margin-right: 5px;
          }
          &:nth-child(2)::before {
             background-position: -65px 0;
          }
          &:nth-child(3)::before {
            background-position: -130px 0;
         }
       }
    }
    .bot_footer {
        padding: 20px 0;
        height: 150px;
        text-align: center;
        a {
         color: #fff;
         margin: 0 5px;
        }
    }
}